Introduction:
In this tutorial you'll learn how to design a table using Bootstrap.
Description:
The HTML tables are used to present data in grid format like row and columns.
See the tutorial on HTML Tables to learn more about tables.
Creating a Simple Table with Bootstrap :
You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding Bootstrap's table class.,
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Example of Bootstrap 3 Simple Tables</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<style type='text/css'>
.bs-example {
margin: 20px;
}
</style>
</head>
<body>
<div class='bs-example'>
<table class='table'>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>rajeev</td>
<td>kumar</td>
<td>rajeev@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>pawan</td>
<td>singh</td>
<td>pawan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>rohit</td>
<td>john</td>
<td>rohit@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The output of the above example will look something like this:
Also, Read how to design table using bootstrap
Leave Comment